Ext.define("Gnt.examples.advanced.view.MainViewport", {
    extend: 'Ext.Viewport',
    alias: 'widget.advanced-viewport',

    requires: [
        'Gnt.examples.advanced.view.MainViewportController',
        'Gnt.examples.advanced.view.MainViewportModel',
        'Gnt.examples.advanced.view.GanttSecondaryToolbar',
        'Gnt.examples.advanced.view.ControlHeader',
        // @cut-if-gantt->
     //   'Gnt.examples.advanced.view.Timeline',
        // <-@
        'Gnt.examples.advanced.view.Gantt'
    ],

    viewModel: 'advanced-viewport',
    controller: 'advanced-viewport',

    layout: 'border',

    initComponent: function () {

        var gantt = Ext.create("Gnt.examples.advanced.view.Gantt", {
            //xtype: 'advanced-gantt',
            region: 'center',
            reference: 'gantt',
            crudManager: this.crudManager,
            startDate: this.startDate,
            endDate: this.endDate,
            //header: Gnt.panel.Timeline ? null : { xtype: 'controlheader' },
            header: { xtype: 'controlheader', hidden: hiddenHeader == 'True' },
            bbar: {
                xtype: 'gantt-secondary-toolbar'
            }
        });
        //gantt.setTimeColumnWidth(20);

        this.items = [gantt];

        this.callParent(arguments);

        // track CRUD manager changes
        this.mon(this.crudManager, {
            haschanges: function () {
                this.getViewModel().set('hasChanges', true);
            },
            nochanges: function () {
                this.getViewModel().set('hasChanges', false);
            },
            scope: this
        });
    }
});
